<template>
  <div class="notification-center">
    <!-- 通知中心头部 -->
    <div class="notification-header">
      <div class="header-left">
        <h3 class="notification-title">
          <i class="fas fa-bell"></i>
          通知中心
          <el-badge 
            v-if="unreadCount > 0"
            :value="unreadCount"
            :max="99"
            class="notification-badge"
          />
        </h3>
      </div>
      
      <div class="header-right">
        <!-- 筛选器 -->
        <el-select 
          v-model="selectedFilter"
          @change="onFilterChange"
          size="small"
          class="filter-select"
        >
          <el-option 
            v-for="filter in filters"
            :key="filter.value"
            :label="filter.label"
            :value="filter.value"
          />
        </el-select>
        
        <!-- 操作按钮 -->
        <el-button-group class="action-buttons">
          <el-button 
            @click="markAllAsRead"
            size="small"
            :disabled="unreadCount === 0"
          >
            <i class="fas fa-check-double"></i>
            全部已读
          </el-button>
          <el-button 
            @click="clearAll"
            size="small"
            type="danger"
            :disabled="notifications.length === 0"
          >
            <i class="fas fa-trash"></i>
            清空
          </el-button>
        </el-button-group>
        
        <!-- 设置按钮 -->
        <el-button 
          @click="showSettings"
          size="small"
          type="text"
          class="settings-btn"
        >
          <i class="fas fa-cog"></i>
        </el-button>
      </div>
    </div>
    
    <!-- 快速统计 -->
    <div class="notification-stats" v-if="showStats">
      <div class="stat-item">
        <div class="stat-icon system">
          <i class="fas fa-info-circle"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">系统通知</div>
          <div class="stat-value">{{ getNotificationCount('system') }}</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon health">
          <i class="fas fa-heartbeat"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">健康提醒</div>
          <div class="stat-value">{{ getNotificationCount('health') }}</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon appointment">
          <i class="fas fa-calendar-check"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">预约提醒</div>
          <div class="stat-value">{{ getNotificationCount('appointment') }}</div>
        </div>
      </div>
      
      <div class="stat-item">
        <div class="stat-icon medication">
          <i class="fas fa-pills"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">用药提醒</div>
          <div class="stat-value">{{ getNotificationCount('medication') }}</div>
        </div>
      </div>
    </div>
    
    <!-- 通知列表 -->
    <div class="notification-list">
      <!-- 加载状态 -->
      <div v-if="loading" class="notification-loading">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
        <p>正在加载通知...</p>
      </div>
      
      <!-- 空状态 -->
      <div v-else-if="filteredNotifications.length === 0" class="notification-empty">
        <div class="empty-icon">
          <i class="fas fa-bell-slash"></i>
        </div>
        <h4>暂无通知</h4>
        <p>{{ getEmptyMessage() }}</p>
      </div>
      
      <!-- 通知项 -->
      <div v-else class="notification-items">
        <div 
          v-for="notification in paginatedNotifications"
          :key="notification.id"
          class="notification-item"
          :class="{
            unread: !notification.read,
            [notification.type]: true,
            urgent: notification.priority === 'urgent'
          }"
          @click="handleNotificationClick(notification)"
        >
          <!-- 通知图标 -->
          <div class="notification-icon">
            <i :class="getNotificationIcon(notification.type)"></i>
            <div v-if="notification.priority === 'urgent'" class="urgent-indicator"></div>
          </div>
          
          <!-- 通知内容 -->
          <div class="notification-content">
            <div class="notification-header-item">
              <h4 class="notification-title-item">{{ notification.title }}</h4>
              <div class="notification-meta">
                <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
                <el-tag 
                  :type="getPriorityType(notification.priority)"
                  size="small"
                  v-if="notification.priority !== 'normal'"
                >
                  {{ getPriorityLabel(notification.priority) }}
                </el-tag>
              </div>
            </div>
            
            <p class="notification-message">{{ notification.message }}</p>
            
            <!-- 通知操作 -->
            <div class="notification-actions" v-if="notification.actions">
              <el-button 
                v-for="action in notification.actions"
                :key="action.key"
                :type="action.type || 'primary'"
                size="small"
                @click.stop="handleAction(notification, action)"
              >
                <i :class="action.icon" v-if="action.icon"></i>
                {{ action.label }}
              </el-button>
            </div>
            
            <!-- 附加信息 -->
            <div class="notification-extra" v-if="notification.extra">
              <div v-if="notification.extra.appointment" class="appointment-info">
                <i class="fas fa-calendar"></i>
                <span>{{ notification.extra.appointment.date }} {{ notification.extra.appointment.time }}</span>
                <span class="doctor-name">{{ notification.extra.appointment.doctor }}</span>
              </div>
              
              <div v-if="notification.extra.medication" class="medication-info">
                <i class="fas fa-pills"></i>
                <span>{{ notification.extra.medication.name }}</span>
                <span class="dosage">{{ notification.extra.medication.dosage }}</span>
              </div>
              
              <div v-if="notification.extra.healthData" class="health-data-info">
                <i class="fas fa-chart-line"></i>
                <span>{{ notification.extra.healthData.type }}: {{ notification.extra.healthData.value }}</span>
              </div>
            </div>
          </div>
          
          <!-- 通知操作菜单 -->
          <div class="notification-menu">
            <el-dropdown @command="(command) => handleMenuCommand(command, notification)" trigger="click">
              <el-button type="text" size="small" class="menu-trigger">
                <i class="fas fa-ellipsis-v"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item 
                    :command="notification.read ? 'mark-unread' : 'mark-read'"
                  >
                    <i :class="notification.read ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                    {{ notification.read ? '标记为未读' : '标记为已读' }}
                  </el-dropdown-item>
                  <el-dropdown-item command="pin" v-if="!notification.pinned">
                    <i class="fas fa-thumbtack"></i>
                    置顶
                  </el-dropdown-item>
                  <el-dropdown-item command="unpin" v-else>
                    <i class="fas fa-thumbtack"></i>
                    取消置顶
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <i class="fas fa-trash"></i>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="notification-pagination" v-if="totalPages > 1">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="filteredNotifications.length"
          layout="prev, pager, next"
          small
          @current-change="onPageChange"
        />
      </div>
    </div>
    
    <!-- 通知设置对话框 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="通知设置"
      width="500px"
      :before-close="closeSettings"
    >
      <div class="notification-settings">
        <!-- 通知类型设置 -->
        <div class="setting-section">
          <h4>通知类型</h4>
          
          <div 
            v-for="type in notificationTypes"
            :key="type.key"
            class="setting-item"
          >
            <div class="setting-label">
              <i :class="type.icon"></i>
              <span>{{ type.label }}</span>
            </div>
            <el-switch v-model="settings.types[type.key]" />
          </div>
        </div>
        
        <!-- 提醒方式设置 -->
        <div class="setting-section">
          <h4>提醒方式</h4>
          
          <div class="setting-item">
            <div class="setting-label">
              <i class="fas fa-desktop"></i>
              <span>桌面通知</span>
            </div>
            <el-switch v-model="settings.desktop" />
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <i class="fas fa-volume-up"></i>
              <span>声音提醒</span>
            </div>
            <el-switch v-model="settings.sound" />
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <i class="fas fa-envelope"></i>
              <span>邮件通知</span>
            </div>
            <el-switch v-model="settings.email" />
          </div>
          
          <div class="setting-item">
            <div class="setting-label">
              <i class="fas fa-mobile-alt"></i>
              <span>短信通知</span>
            </div>
            <el-switch v-model="settings.sms" />
          </div>
        </div>
        
        <!-- 免打扰设置 -->
        <div class="setting-section">
          <h4>免打扰时间</h4>
          
          <div class="setting-item">
            <div class="setting-label">
              <i class="fas fa-moon"></i>
              <span>启用免打扰</span>
            </div>
            <el-switch v-model="settings.doNotDisturb.enabled" />
          </div>
          
          <div class="time-range-setting" v-if="settings.doNotDisturb.enabled">
            <div class="time-input">
              <label>开始时间</label>
              <el-time-picker
                v-model="settings.doNotDisturb.startTime"
                format="HH:mm"
                placeholder="选择时间"
                size="small"
              />
            </div>
            <div class="time-input">
              <label>结束时间</label>
              <el-time-picker
                v-model="settings.doNotDisturb.endTime"
                format="HH:mm"
                placeholder="选择时间"
                size="small"
              />
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetSettings">重置</el-button>
          <el-button @click="closeSettings">取消</el-button>
          <el-button @click="saveSettings" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import {
  ElSelect,
  ElOption,
  ElButton,
  ElButtonGroup,
  ElBadge,
  ElTag,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElPagination,
  ElDialog,
  ElSwitch,
  ElTimePicker,
  ElIcon,
  ElMessage,
  ElMessageBox
} from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  notifications: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  showStats: {
    type: Boolean,
    default: true
  },
  pageSize: {
    type: Number,
    default: 10
  },
  autoRefresh: {
    type: Boolean,
    default: true
  },
  refreshInterval: {
    type: Number,
    default: 30000
  }
})

// Emits
const emit = defineEmits([
  'notification-click',
  'notification-action',
  'mark-read',
  'mark-unread',
  'delete-notification',
  'clear-all',
  'settings-change',
  'refresh'
])

// 响应式数据
const selectedFilter = ref('all')
const currentPage = ref(1)
const settingsDialogVisible = ref(false)
const refreshTimer = ref(null)

// 筛选选项
const filters = ref([
  { label: '全部通知', value: 'all' },
  { label: '未读通知', value: 'unread' },
  { label: '系统通知', value: 'system' },
  { label: '健康提醒', value: 'health' },
  { label: '预约提醒', value: 'appointment' },
  { label: '用药提醒', value: 'medication' },
  { label: '置顶通知', value: 'pinned' }
])

// 通知类型
const notificationTypes = ref([
  { key: 'system', label: '系统通知', icon: 'fas fa-info-circle' },
  { key: 'health', label: '健康提醒', icon: 'fas fa-heartbeat' },
  { key: 'appointment', label: '预约提醒', icon: 'fas fa-calendar-check' },
  { key: 'medication', label: '用药提醒', icon: 'fas fa-pills' }
])

// 通知设置
const settings = ref({
  types: {
    system: true,
    health: true,
    appointment: true,
    medication: true
  },
  desktop: true,
  sound: true,
  email: false,
  sms: false,
  doNotDisturb: {
    enabled: false,
    startTime: new Date(2000, 0, 1, 22, 0),
    endTime: new Date(2000, 0, 1, 8, 0)
  }
})

// 默认通知数据
const defaultNotifications = ref([
  {
    id: '1',
    type: 'health',
    title: '血压监测提醒',
    message: '您今天还没有测量血压，建议您及时监测血压变化。',
    priority: 'normal',
    read: false,
    pinned: false,
    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
    actions: [
      { key: 'measure', label: '立即测量', type: 'primary', icon: 'fas fa-tint' },
      { key: 'remind-later', label: '稍后提醒', type: 'default' }
    ]
  },
  {
    id: '2',
    type: 'appointment',
    title: '预约提醒',
    message: '您明天上午10:00有一个心内科的预约，请准时到达。',
    priority: 'urgent',
    read: false,
    pinned: true,
    createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000),
    extra: {
      appointment: {
        date: '2024-01-16',
        time: '10:00',
        doctor: '张医生'
      }
    },
    actions: [
      { key: 'confirm', label: '确认到达', type: 'success', icon: 'fas fa-check' },
      { key: 'reschedule', label: '重新预约', type: 'warning' }
    ]
  },
  {
    id: '3',
    type: 'medication',
    title: '用药提醒',
    message: '该服用降压药了，请按时服药。',
    priority: 'normal',
    read: true,
    pinned: false,
    createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000),
    extra: {
      medication: {
        name: '氨氯地平片',
        dosage: '5mg，每日一次'
      }
    },
    actions: [
      { key: 'taken', label: '已服用', type: 'success', icon: 'fas fa-check' },
      { key: 'skip', label: '跳过', type: 'default' }
    ]
  },
  {
    id: '4',
    type: 'system',
    title: '系统更新',
    message: '小智医疗助手有新版本可用，建议您及时更新以获得更好的体验。',
    priority: 'normal',
    read: true,
    pinned: false,
    createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000),
    actions: [
      { key: 'update', label: '立即更新', type: 'primary', icon: 'fas fa-download' },
      { key: 'later', label: '稍后更新', type: 'default' }
    ]
  },
  {
    id: '5',
    type: 'health',
    title: '异常数据提醒',
    message: '您的心率数据出现异常波动，建议咨询医生。',
    priority: 'urgent',
    read: false,
    pinned: false,
    createdAt: new Date(Date.now() - 8 * 60 * 60 * 1000),
    extra: {
      healthData: {
        type: '心率',
        value: '105 bpm'
      }
    },
    actions: [
      { key: 'consult', label: '在线咨询', type: 'danger', icon: 'fas fa-user-md' },
      { key: 'ignore', label: '忽略', type: 'default' }
    ]
  }
])

// 计算属性
const notifications = computed(() => {
  return props.notifications.length > 0 ? props.notifications : defaultNotifications.value
})

const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

const filteredNotifications = computed(() => {
  let filtered = notifications.value
  
  switch (selectedFilter.value) {
    case 'unread':
      filtered = filtered.filter(n => !n.read)
      break
    case 'system':
    case 'health':
    case 'appointment':
    case 'medication':
      filtered = filtered.filter(n => n.type === selectedFilter.value)
      break
    case 'pinned':
      filtered = filtered.filter(n => n.pinned)
      break
  }
  
  // 排序：置顶的在前，然后按时间倒序
  return filtered.sort((a, b) => {
    if (a.pinned && !b.pinned) return -1
    if (!a.pinned && b.pinned) return 1
    return new Date(b.createdAt) - new Date(a.createdAt)
  })
})

const totalPages = computed(() => {
  return Math.ceil(filteredNotifications.value.length / props.pageSize)
})

const paginatedNotifications = computed(() => {
  const start = (currentPage.value - 1) * props.pageSize
  const end = start + props.pageSize
  return filteredNotifications.value.slice(start, end)
})

// 方法
const getNotificationCount = (type) => {
  return notifications.value.filter(n => n.type === type).length
}

const getEmptyMessage = () => {
  switch (selectedFilter.value) {
    case 'unread':
      return '所有通知都已阅读'
    case 'system':
      return '暂无系统通知'
    case 'health':
      return '暂无健康提醒'
    case 'appointment':
      return '暂无预约提醒'
    case 'medication':
      return '暂无用药提醒'
    case 'pinned':
      return '暂无置顶通知'
    default:
      return '暂无通知消息'
  }
}

const getNotificationIcon = (type) => {
  const iconMap = {
    system: 'fas fa-info-circle',
    health: 'fas fa-heartbeat',
    appointment: 'fas fa-calendar-check',
    medication: 'fas fa-pills'
  }
  return iconMap[type] || 'fas fa-bell'
}

const getPriorityType = (priority) => {
  const typeMap = {
    urgent: 'danger',
    high: 'warning',
    normal: 'info',
    low: 'info'
  }
  return typeMap[priority] || 'info'
}

const getPriorityLabel = (priority) => {
  const labelMap = {
    urgent: '紧急',
    high: '重要',
    normal: '普通',
    low: '低'
  }
  return labelMap[priority] || '普通'
}

const formatTime = (date) => {
  const now = new Date()
  const diff = now - new Date(date)
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  
  return new Date(date).toLocaleDateString('zh-CN')
}

const onFilterChange = (value) => {
  selectedFilter.value = value
  currentPage.value = 1
}

const onPageChange = (page) => {
  currentPage.value = page
}

const handleNotificationClick = (notification) => {
  if (!notification.read) {
    markAsRead(notification)
  }
  emit('notification-click', notification)
}

const handleAction = (notification, action) => {
  emit('notification-action', { notification, action })
  
  // 处理一些默认行为
  switch (action.key) {
    case 'taken':
    case 'confirm':
      markAsRead(notification)
      ElMessage.success('操作已完成')
      break
    case 'remind-later':
      ElMessage.info('将在30分钟后再次提醒')
      break
  }
}

const handleMenuCommand = (command, notification) => {
  switch (command) {
    case 'mark-read':
      markAsRead(notification)
      break
    case 'mark-unread':
      markAsUnread(notification)
      break
    case 'pin':
      pinNotification(notification)
      break
    case 'unpin':
      unpinNotification(notification)
      break
    case 'delete':
      deleteNotification(notification)
      break
  }
}

const markAsRead = (notification) => {
  notification.read = true
  emit('mark-read', notification)
}

const markAsUnread = (notification) => {
  notification.read = false
  emit('mark-unread', notification)
}

const pinNotification = (notification) => {
  notification.pinned = true
  ElMessage.success('通知已置顶')
}

const unpinNotification = (notification) => {
  notification.pinned = false
  ElMessage.success('已取消置顶')
}

const deleteNotification = async (notification) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条通知吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    emit('delete-notification', notification)
    ElMessage.success('通知已删除')
  } catch {
    // 用户取消
  }
}

const markAllAsRead = () => {
  notifications.value.forEach(notification => {
    if (!notification.read) {
      notification.read = true
    }
  })
  ElMessage.success('所有通知已标记为已读')
}

const clearAll = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空所有通知吗？此操作不可恢复。',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    emit('clear-all')
    ElMessage.success('所有通知已清空')
  } catch {
    // 用户取消
  }
}

const showSettings = () => {
  settingsDialogVisible.value = true
}

const closeSettings = () => {
  settingsDialogVisible.value = false
}

const saveSettings = () => {
  emit('settings-change', settings.value)
  settingsDialogVisible.value = false
  ElMessage.success('设置已保存')
}

const resetSettings = () => {
  settings.value = {
    types: {
      system: true,
      health: true,
      appointment: true,
      medication: true
    },
    desktop: true,
    sound: true,
    email: false,
    sms: false,
    doNotDisturb: {
      enabled: false,
      startTime: new Date(2000, 0, 1, 22, 0),
      endTime: new Date(2000, 0, 1, 8, 0)
    }
  }
}

const startAutoRefresh = () => {
  if (props.autoRefresh && !refreshTimer.value) {
    refreshTimer.value = setInterval(() => {
      emit('refresh')
    }, props.refreshInterval)
  }
}

const stopAutoRefresh = () => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
    refreshTimer.value = null
  }
}

// 生命周期
onMounted(() => {
  if (props.autoRefresh) {
    startAutoRefresh()
  }
})

onUnmounted(() => {
  stopAutoRefresh()
})

// 监听自动刷新设置变化
watch(() => props.autoRefresh, (newValue) => {
  if (newValue) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
})

watch(() => props.refreshInterval, () => {
  if (props.autoRefresh) {
    stopAutoRefresh()
    startAutoRefresh()
  }
})
</script>

<style scoped>
.notification-center {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.header-left {
  flex: 1;
}

.notification-title {
  color: #2c5aa0;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-badge {
  margin-left: 8px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-select {
  width: 120px;
}

.action-buttons {
  display: flex;
}

.settings-btn {
  color: #666;
}

.notification-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.stat-icon.system {
  background: #3498db;
}

.stat-icon.health {
  background: #e74c3c;
}

.stat-icon.appointment {
  background: #2ecc71;
}

.stat-icon.medication {
  background: #f39c12;
}

.stat-content {
  flex: 1;
}

.stat-label {
  color: #666;
  font-size: 12px;
  margin-bottom: 2px;
}

.stat-value {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.notification-list {
  min-height: 400px;
}

.notification-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
}

.notification-loading .el-icon {
  font-size: 32px;
  color: #2c5aa0;
  margin-bottom: 10px;
}

.notification-loading p {
  font-size: 14px;
  margin: 0;
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.notification-empty h4 {
  color: #666;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.notification-empty p {
  color: #999;
  font-size: 14px;
  margin: 0;
}

.notification-items {
  padding: 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.notification-item:hover {
  background: #f8f9fa;
}

.notification-item.unread {
  background: #f0f7ff;
  border-left: 4px solid #2c5aa0;
}

.notification-item.urgent {
  border-left: 4px solid #e74c3c;
}

.notification-item.urgent.unread {
  background: #fef2f2;
}

.notification-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.notification-item.system .notification-icon {
  background: #3498db;
}

.notification-item.health .notification-icon {
  background: #e74c3c;
}

.notification-item.appointment .notification-icon {
  background: #2ecc71;
}

.notification-item.medication .notification-icon {
  background: #f39c12;
}

.urgent-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid white;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 15px;
}

.notification-title-item {
  color: #333;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notification-time {
  color: #999;
  font-size: 12px;
  white-space: nowrap;
}

.notification-message {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.notification-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.notification-extra {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 13px;
}

.appointment-info,
.medication-info,
.health-data-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.appointment-info i,
.medication-info i,
.health-data-info i {
  color: #2c5aa0;
}

.doctor-name,
.dosage {
  color: #999;
  font-size: 12px;
}

.notification-menu {
  flex-shrink: 0;
}

.menu-trigger {
  color: #999;
  padding: 4px;
}

.notification-pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 通知设置对话框 */
.notification-settings {
  max-height: 500px;
  overflow-y: auto;
}

.setting-section {
  margin-bottom: 25px;
}

.setting-section h4 {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

.setting-label i {
  color: #2c5aa0;
  width: 16px;
}

.time-range-setting {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  padding-left: 24px;
}

.time-input {
  flex: 1;
}

.time-input label {
  display: block;
  color: #666;
  font-size: 12px;
  margin-bottom: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .header-right {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .notification-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .notification-item {
    padding: 15px;
    gap: 12px;
  }
  
  .notification-header-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .notification-meta {
    align-self: flex-end;
  }
  
  .notification-actions {
    flex-wrap: wrap;
  }
  
  .time-range-setting {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .notification-center {
    margin: 0;
    border-radius: 0;
  }
  
  .notification-header {
    padding: 15px;
  }
  
  .notification-stats {
    grid-template-columns: 1fr;
    padding: 15px;
  }
  
  .notification-item {
    padding: 12px;
  }
  
  .notification-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .notification-title-item {
    font-size: 14px;
  }
  
  .notification-message {
    font-size: 13px;
  }
}
</style>